<template>
  <div class="shoppingCart">
      <div class="content" v-if="commodityList.length">
        <div class="content-item" v-for="(item, idx) in commodityList" :key="idx">
          <nut-swipe>
            <div class="content-item-middle">
              <div class="middle-check">
                <nut-checkbox v-model="item.checkFlag" label="复选框" @change="TarCheckChange()"></nut-checkbox>
              </div>
              <div class="middle-photo">
                <Image class="middle-photo-img" :src="item.produce_img[0]"></Image>
              </div>
              <div class="middle-message">
                <p class="middle-message-title">{{item.produce_name}}</p>
                <p class="middle-message-price">
                  <span>¥</span>
                  <span>{{ item.produce_price }}</span>
                  <!-- <span>.00</span> -->
                </p>
              </div>
            </div>
            <template #right>
              <nut-button 
                shape="square" 
                style="height:100%" 
                type="danger"
                @click="RighDeletOpera(item)">删除</nut-button>
            </template>
          </nut-swipe>
          <div class="content-item-bottom">
              <div class="bottom-opera">
                <nut-input-number 
                  v-model="item.num" 
                  readonly 
                  @add="AmountAddOpera(item)"
                  @reduce="AmountReduceOpera(item)"/>
              </div>
            </div>
        </div>
      </div>
      <nut-empty description="无数据" v-else></nut-empty>
      <div class="opera">
        <div class="opera-content">
          <div class="opera-content-left">
            <div class="left-icon">
              <Cart size="24" color="#4B4F55"></Cart>
              <div class="left-icon-circle">{{ cartAmount }}</div>
            </div>
            <div class="left-price">
              <span>¥</span>
              <span>{{ cartPrice }}</span>
            </div>
          </div>
          <nut-button 
            :disabled="cartAmount ? false : true"
            class="closeAnAccount-opera" 
            shape="square" 
            type="primary" 
            @click="GoCloseAnAccount()">结算</nut-button>
        </div>
      </div>
  </div>
</template>

<script>
import { reactive, toRefs,onMounted } from 'vue';
import './index.scss';
import { GetShoppingCartList, DelShoppingCart,ChangeShop } from '../utils/api.js';
import Taro from '@tarojs/taro'
import { Search ,Cart } from '@nutui/icons-vue-taro';
export default {
  name: 'Index',
  components: {
    Search,Cart
  },
  setup(){
    const state = reactive({
      commodityList: [],
      cartAmount: 0, // 购物车内商品总数量
      cartPrice: 0, // 购物车总金额
    });
    const GetConfig = () => {
      GetShoppingCartList({}).then((res) => {
        if(res.code == 200) {
          state.commodityList = res.data.map((res) => {
            return Object.assign({
              checkFlag:false,
              num: 1
            },res)
          })
        }
      })
    }
    onMounted(() => {
      GetConfig();
    });
    // 当前商品选择的改变 
    const TarCheckChange = () => {
      CommonDisposePrice()
    }
    // 数量添加
    const AmountAddOpera = async (tarVal) => {
      let count = Number(tarVal.num);
      let changeRes  = await ChangeShop({
        produce_id: tarVal.produce_id,
        num: ++count
      });
      if(changeRes.code == 200) {
        CommonDisposePrice();
      };
    }
    // 数量减少
    const AmountReduceOpera = async (tarVal) => {
      let count = Number(tarVal.num);
      let changeRes  = await ChangeShop({
        produce_id: tarVal.produce_id,
        num: --count
      });
      if(changeRes.code == 200) {
        CommonDisposePrice();
      };
    }
    // 公共处理价格与数量
    const CommonDisposePrice = () => {
      let checkedArr = state.commodityList.filter((i) => i.checkFlag);
      if(checkedArr.length === 0) {
        state.cartAmount = 0;
        state.cartPrice = 0;
        return;
      }
      let amount = 0, price = 0;
      checkedArr.forEach((i) => {
        amount += Number(i.num);
        price += Number(i.produce_price) *  Number(i.num);
      });
      state.cartAmount = amount;
      state.cartPrice = price;
    }
    // 删除商品
    const RighDeletOpera = async (tarVal) => {
      let delRes = await DelShoppingCart({
        id: tarVal.id
      })
      if(delRes.code == 200) {
        Taro.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 1500,
            success: () => {
              GetConfig();
            }
        })
      }
      console.log(11,tarVal,state.commodityList,)
    }
    // 前往结算
    const GoCloseAnAccount = () => {
      let checkedArr = state.commodityList.filter((i) => i.checkFlag);
      Taro.navigateTo({
        url: `/pages/commodity-closeAnAccount/index?entryType=2&commodityList=${JSON.stringify(checkedArr)}&totalPrice=${state.cartPrice}&totalAmount=${state.cartAmount}`
      })
    }
    return {
      TarCheckChange,
      RighDeletOpera,
      AmountAddOpera,
      AmountReduceOpera,
      GoCloseAnAccount,
      ...toRefs(state),
    }
  }
}
</script>
  